import {
  View,
  StyleSheet,
  KeyboardAvoidingView,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import { Text } from "@/components/ui/Text";
import { useState } from "react";
import { router, useLocalSearchParams } from "expo-router";
import { Card } from "@/components/ui/Cards";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import { Section, SectionHeader } from "@/components/ui/Sections";
import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
import { TimePicker } from "@/components/ui/TimePicker";
import { useMedicineRegimen, useUpdateMedicineRegimen } from "@/hooks";
import type { MedicinePeriodicity, MedicineRegimen } from "@/lib/api";

const PERIODICITY_OPTIONS: { label: string; value: MedicinePeriodicity }[] = [
  { label: "Uma vez", value: "ONCE" },
  { label: "Diário", value: "DAILY" },
  { label: "2x ao dia", value: "TWICE_DAILY" },
  { label: "3x ao dia", value: "THREE_TIMES_DAILY" },
  { label: "Semanal", value: "WEEKLY" },
  { label: "Quinzenal", value: "BIWEEKLY" },
  { label: "Mensal", value: "MONTHLY" },
];

function getTimePickerCount(p: MedicinePeriodicity): number {
  switch (p) {
    case "ONCE": return 0;
    case "DAILY": return 1;
    case "TWICE_DAILY": return 2;
    case "THREE_TIMES_DAILY": return 3;
    default: return 1;
  }
}

function timesToDates(times: string[]): Date[] {
  return times.map((t) => {
    const [h, m] = t.split(":").map(Number);
    const d = new Date();
    d.setHours(h, m, 0, 0);
    return d;
  });
}

export default function MedicineRegimenEdit() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data, isLoading } = useMedicineRegimen(id);

  if (isLoading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator color={Colors.light.tint} />
      </View>
    );
  }

  if (!data?.regimen) {
    return null;
  }

  return <MedicineRegimenForm id={id} regimen={data.regimen} />;
}

function MedicineRegimenForm({ id, regimen }: { id: string; regimen: MedicineRegimen }) {
  const updateRegimen = useUpdateMedicineRegimen();

  const [name, setName] = useState(regimen.name);
  const [dosage, setDosage] = useState(regimen.dosage);
  const [periodicity, setPeriodicity] = useState<MedicinePeriodicity>(regimen.periodicity);
  const [scheduledTimes, setScheduledTimes] = useState<Date[]>(
    timesToDates(regimen.scheduledAt),
  );

  const handleSave = async () => {
    const count = getTimePickerCount(periodicity);
    const scheduledAt = scheduledTimes.slice(0, count).map(
      (d) =>
        `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`
    );

    await updateRegimen.mutateAsync({
      id,
      payload: { name, dosage, periodicity, scheduledAt },
    });
    router.back();
  };

  return (
    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
      <ScrollView scrollEventThrottle={16}>
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.headerTitle}>Editar medicamento</Text>
            <Text style={styles.headerSubtitle}>
              Atualize os detalhes do medicamento
            </Text>
          </View>

          <Section>
            <SectionHeader title="Detalhes" />
            <Card style={{ padding: Spacing.cardGap }}>
              <Input
                label="Nome"
                value={name}
                onChangeText={setName}
                placeholder="Ex: Fluoxetina"
                variant="darkGhost"
              />
              <Input
                label="Dosagem"
                value={dosage}
                onChangeText={setDosage}
                placeholder="Ex: 20mg"
                variant="darkGhost"
              />
            </Card>
          </Section>

          <Section>
            <SectionHeader title="Frequência" />
            <View style={styles.periodicityRow}>
              {PERIODICITY_OPTIONS.map((opt) => (
                <TouchableOpacity
                  key={opt.value}
                  style={[
                    styles.periodicityChip,
                    periodicity === opt.value && styles.periodicityChipActive,
                  ]}
                  onPress={() => {
                    setPeriodicity(opt.value);
                    const count = getTimePickerCount(opt.value);
                    setScheduledTimes((prev) =>
                      count === 0
                        ? []
                        : count > prev.length
                        ? [...prev, ...Array(count - prev.length).fill(new Date())]
                        : prev.slice(0, count)
                    );
                  }}
                  activeOpacity={0.7}
                >
                  <Text
                    style={[
                      styles.periodicityChipLabel,
                      periodicity === opt.value && styles.periodicityChipLabelActive,
                    ]}
                  >
                    {opt.label}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </Section>

          {scheduledTimes.length > 0 && (
            <Section>
              <SectionHeader
                title={scheduledTimes.length === 1 ? "Horário" : "Horários"}
              />
              {scheduledTimes.map((t, i) => (
                <View style={{ marginTop: 10 }} key={i}>
                  <TimePicker
                    value={t}
                    onChange={(date) =>
                      setScheduledTimes((prev) =>
                        prev.map((v, idx) => (idx === i ? date : v))
                      )
                    }
                  />
                </View>
              ))}
            </Section>
          )}

          <Button
            title="Salvar"
            onPress={handleSave}
            loading={updateRegimen.isPending}
            disabled={!name || !dosage}
          />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  keyboardView: { flex: 1 },
  center: { flex: 1, alignItems: "center", justifyContent: "center" },
  container: {
    gap: 24,
    paddingHorizontal: Spacing.containerPadding,
    paddingVertical: Spacing.sectionGap,
    marginBottom: 50,
  },
  header: { gap: 8 },
  headerTitle: { ...Typography.headlineMd },
  headerSubtitle: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
  },
  periodicityRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  periodicityChip: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: BorderRadius.full,
    backgroundColor: "#fff",
    borderWidth: 1.5,
    borderColor: Colors.light.divider,
  },
  periodicityChipActive: {
    backgroundColor: Colors.light.tint + "1A",
    borderColor: Colors.light.tint,
  },
  periodicityChipLabel: {
    fontSize: 14,
    fontWeight: "500",
    color: Colors.light.text,
  },
  periodicityChipLabelActive: {
    fontWeight: "600",
    color: Colors.light.text,
  },
});